<template>
  <div class="box">
    <h1>jquery使用</h1>
    <button class="hide">hide</button>
    <button class="show">show</button>
    <div class="an"></div>
  </div>
</template>

<script>
// 1.下载
// 2.引入,在那使用在那引入，很多页面都用，在main.js中引入
// import $ from "jquery"
export default {

    //3.使用，一定要在mounted之后才能使用
    mounted(){
        //点击隐藏
        this.$(".hide").click(()=>{
            this.$(".an").slideUp(400);
        })
        //点击显示
        this.$(".show").click(()=>{
            this.$(".an").slideDown(400);
        })
    }
}
</script>

<style scoped>
.an{
    width: 200px;
    height: 200px;
    background: red;
}
</style>